<template>
  <div class="main-box">
    <BaseTitle :title="$route.query.id ? '编辑软著' : '新增软著'">
      <template #right><BackBtn /></template>
    </BaseTitle>
    <el-form
      ref="formRef"
      class="addForm flexForm"
      :rules="rules"
      :model="formData"
      label-position="top"
    >
      <el-form-item label="软件名称：" prop="title">
        <el-input v-model="formData.title" placeholder="请输入软件名称" />
      </el-form-item>
      <el-form-item label="证书编号：" prop="code">
        <el-input v-model="formData.code" placeholder="请输入证书编号" />
      </el-form-item>
      <el-form-item label="著作权人：" prop="apply_user">
        <el-input v-model="formData.apply_user" placeholder="请输入著作权人" />
      </el-form-item>
      <el-form-item label="发证机关：" prop="grant_office">
        <el-input
          v-model="formData.grant_office"
          placeholder="请输入发证机关"
        />
      </el-form-item>

      <el-form-item label="登记号：" prop="reg_code">
        <el-input v-model="formData.reg_code" placeholder="请输入登记号" />
      </el-form-item>
      <el-form-item label="发证日期：" prop="grant_time">
        <el-date-picker
          v-model="formData.grant_time"
          type="datetime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :placeholder="$t('请选择日期时间')"
        />
      </el-form-item>
      <el-form-item label="权利范围：" prop="right_scope">
        <el-input v-model="formData.right_scope" placeholder="请输入权利范围" />
      </el-form-item>

      <el-form-item label="授权文件：" prop="grant_file">
        <BaseUpload v-model="formData.grant_file" :show-list="false">
          <BaseImg
            v-if="formData.grant_file"
            :preview="false"
            class="upload-img"
            :src="formData.grant_file[0].url"
          />
          <div v-else class="upload-card">
            <i class="el-icon-plus" />
          </div>
          <p slot="description" />
        </BaseUpload>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleAddSoft">保存</el-button>
  </div>
</template>

<script>
import softApi from '@/api/soft'
export default {
  data() {
    return {
      rules: {
        title: {
          required: true,
          message: '请输入软件名称'
        },
        code: {
          required: true,
          message: '请输入证书编号'
        },
        reg_code: {
          required: true,
          message: '请输入登记号'
        },
        apply_user: {
          required: true,
          message: '请输入著作权人'
        },
        right_scope: {
          required: true,
          message: '请输入权利范围'
        },
        grant_office: {
          required: true,
          message: '请输入发证机关'
        },
        grant_time: {
          required: true,
          message: '请输入发证日期'
        },
        grant_file: {
          required: true,
          validator: this.checkFile,
          trigger: 'change'
        }
      },
      formData: {}
    }
  },
  created() {
    this.getSoftInfo()
  },
  methods: {
    async getSoftInfo() {
      if (this.$route.query.id) {
        const res = await softApi.softInfo({
          id: this.$route.query.id
        })
        this.formData = {
          ...res.data,
          grant_file: [{ url: res.data.grant_file }]
        }
      }
    },
    checkFile(rule, value, cb) {
      if (value?.length) {
        cb()
      } else {
        cb(new Error('请上传软著等级证书'))
      }
    },
    handleCancel() {
      this.$router.back()
    },
    async handleAddSoft() {
      const res = await this.$refs.formRef
        .validate()
        .catch(err => console.log(err))
      if (res) {
        let result = null
        this.formData = {
          ...this.formData,
          grant_file: this.formData.grant_file[0].url
        }
        if (this.formData.id) {
          result = await softApi.editSoft(this.formData)
        } else {
          result = await softApi.addSoft(this.formData)
        }
        if (result.code == 0) {
          this.$message.success(result.msg)
          this.$router.back()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addForm {
  ::v-deep .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}

.upload-img {
  width: 100px;
}
.upload-card {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 100px;
}
</style>
